<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>

<body>
<div id="div1" style="background-color: #c0c0c0; width: 248px; height: 248px; border: 1px solid #990000" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="image" src="../image/riven.jpg" alt="[图片]" width="240" height="240" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"/>
<div id="div2" style="background-color: #c0c0c0; width: 248px; height: 248px; border: 1px solid #990000" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<script type="text/javascript">
    function dragStart(ev) {
        ev.dataTransfer.setData("imageId",ev.target.id)
    }

    function dragEnd(ev) {
        ev.preventDefault()
    }

    function allowDrop(ev) {
        ev.preventDefault()
    }

    function drop(ev) {
        ev.preventDefault()
        var dataId = ev.dataTransfer.getData("imageId")
        ev.target.appendChild(document.getElementById(dataId))
    }
</script>
</body>
</html>